<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>

		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<title>小K服务后台管理系统--IP地址导入/导出</title>
		<meta name="keywords" content="">
		<meta name="description" content="">

		<link rel="shortcut icon" href="../../../../static/favicon.ico" th:href="@{/favicon.ico}">
		<link rel="stylesheet" type="text/css" href="../../../../static/bootstrap/css/bootstrap.min.css" th:href="@{/bootstrap/css/bootstrap.min.css}" />
		<link rel="stylesheet" type="text/css" href="../../../../static/plugins/sweetalert/sweetalert.css" th:href="@{/plugins/sweetalert/sweetalert.css}" />
		<link rel="stylesheet" type="text/css" href="../../../../static/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" th:href="@{/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css}" />
		<link rel="stylesheet" type="text/css" href="../../../../static/plugins/layui/css/layui.css" th:href="@{/plugins/layui/css/layui.css}" />
		<link rel="stylesheet" type="text/css" href="../../../../static/web/admin/css/font-awesome.css" th:href="@{/web/admin/css/font-awesome.css}" />
		<link rel="stylesheet" type="text/css" href="../../../../static/web/admin/css/animate.css" th:href="@{/web/admin/css/animate.css}" />
		<link rel="stylesheet" type="text/css" href="../../../../static/web/admin/css/style.css" th:href="@{/web/admin/css/style.css}" />

		<style type="text/css">
			table td,
			table th {
				text-align: center;
			}
			
			table td:nth-child(2),
			table th:nth-child(2) {
				text-align: left;
			}
		</style>
	</head>

	<body class="gray-bg">
		<div class="wrapper wrapper-content animated fadeInRight">

			<div class="row">
				<div class="col-sm-12">
					<div class="ibox float-e-margins">
						<!--<div class="ibox-title">
							<h5>IP列表 <small>内网IP信息管理</small></h5>
						</div>-->
						<div class="ibox-content">
							<div class="row">
								<div class="col-md-12">
									<div class="row text-center">
										<button class="btn btn-info dim btn-large-dim btn-outline" type="button" style="width: 200px;height: 200px;" id="export">
					<i class="fa fa-download" style="font-size: 100px;"></i><br /><span>导出</span>
                    </button>
										<button class="btn btn-info dim btn-large-dim btn-outline" type="button" style="width: 200px;height: 200px;" id="import">
					<i class="fa fa-upload" style="font-size: 100px;"></i><br /><span>导入</span>
                    </button>
										<button class="btn btn-info dim btn-large-dim btn-outline" type="button" style="width: 200px;height: 200px;" id="clear">
					<i class="fa fa-trash-o" style="font-size: 100px;"></i><br /><span>清空</span>
                   </button>
									</div>
								</div>
							</div>
							<div class="row">
								<div class="col-md-4">

								</div>
								<div class="col-md-5">
									<blockquote>
										<h2>导出</h2>
										<p>将全部IP地址数据导出为电子表格文件（*.xlsx）</p>
									</blockquote>
									<blockquote>
										<h2>导入</h2>
										<p>通过上传电子表格文件（*.xls、*.xlsx、*.csv）来导入IP地址数据，请
											<a href="#" th:href="@{/importTpl/schoolIpTemplate.xlsx}" target="_blank">[下载导入模板]</a>，编辑完后再上传导入</p>
									</blockquote>
									<blockquote>
										<h2>清空</h2>
										<p>该操作将清空数据库中所有的IP地址信息</p>
									</blockquote>
								</div>
								<div class="col-md-3">

								</div>
							</div>
						</div>
					</div>
				</div>

			</div>

		</div>

		<script src="../../../../static/plugins/jquery.min.js" th:src="@{/plugins/jquery.min.js}" type="text/javascript" charset="utf-8"></script>
		<script src="../../../../static/bootstrap/js/bootstrap.min.js" th:src="@{/bootstrap/js/bootstrap.min.js}" type="text/javascript" charset="utf-8"></script>
		<script src="../../../../static/plugins/vuejs/vue.min.js" th:src="@{/plugins/vuejs/vue.min.js}" type="text/javascript" charset="utf-8"></script>
		<script src="../../../../static/plugins/layui/layui.js" th:src="@{/plugins/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
		<script src="../../../../static/plugins/sweetalert/sweetalert.min.js" th:src="@{/plugins/sweetalert/sweetalert.min.js}" type="text/javascript" charset="utf-8"></script>
		<script src="../../../../static/web/admin/js/content.js" th:src="@{/web/admin/js/content.js}" type="text/javascript" charset="utf-8"></script>
		<script src="../../../../static/URL.js" th:src="@{/URL.js}"></script>
		<script type="text/javascript">
            layui.use(['layer','upload'], function(){
                var layer = layui.layer, //获得layer模块
                    upload = layui.upload;//得到 upload 对象
                //使用模块
                upload.render({
                    elem: '#import',
                    url: "import",
                    accept: 'file', //允许上传的文件类型
                    size:5120,
                    exts:"xls|xlsx|csv",
                    field:"file",
                    done: function(data, index, upload){ //上传后的回调
                        if(data.code === 0) {
                            swal("导入成功！", data.msg, "success");
                        } else {
                            swal("导入失败", "导入数据遇到错误，" + data.msg + "。", "error");
                        }
                    },
                    error:function () {
                        swal("错误", "加载错误！", "error");
                    }
                });
                $("#export").click(function() {
                    window.open("export");
                });
                $("#clear").click(function() {
                    swal({
                            title: "您确定要清空IP地址信息吗？",
                            text: "数据被清空后将无法恢复，请谨慎操作！",
                            type: "warning",
                            showCancelButton: true,
                            confirmButtonColor: "#DD6B55",
                            confirmButtonText: "是的，我要清空！",
                            cancelButtonText: "让我再考虑一下…",
                            closeOnConfirm: false,
                            closeOnCancel: true
                        },
                        function(isConfirm) {
                            if(isConfirm) {
                                $.ajax({
                                    type: "post",
                                    url: "clear",
                                    async: true,
                                    dataType: "json",
                                    success: function(data) {
                                        if(data.code === 0) {
                                            swal("清空成功！", "您已经清空了系统的IP信息。", "success");
                                        } else {
                                            swal("清空失败", "清空IP信息遇到错误，原因：" + data.msg + "。", "error");
                                        }
                                    },
                                    error: function() {
                                        swal("错误", "加载错误！", "error");
                                    }
                                });
                            } else {
                                //swal("已取消", "您取消了清空操作！", "error");
                            }
                        });
                });
            });
		</script>
	</body>

</html>